import React, { Component } from 'react'
import styles from "./Index.module.scss"
import { EyeOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import axios from "axios";

export default class Dashboard extends Component {
    componentDidMount() {
        let bandarr1 = [];//商品名称
        let quantityarr1 = [];//商品数量
        let num1=0;
        let num2 = 0;
        let num3 = 0;
        let num4 = 0;
        let num5 = 0;
        let num6 = 0;
        let num7 = 0;
        axios.get("http://class.aulence.com/store-manage/w2003/goods-manage-g4/goods-info.php").then(res => {
            var allarr = res.data
            console.log(allarr)
            for (let i = 0; i < allarr.length; i++) {
                bandarr1.push(allarr[i].brand)
                quantityarr1.push(parseInt(allarr[i].quantity))
                if (allarr[i].category ==="苹果"){
                    num1++
                }
                if (allarr[i].category === "三星") {
                    num2++
                }
                if (allarr[i].category === "IOS") {
                    num3++
                }
                if (allarr[i].category === "国产品牌") {
                    num4++
                }
                if (allarr[i].category === "华为") {
                    num5++
                }
                if (allarr[i].category === "Oppo") {
                    num6++
                }
                if (allarr[i].category === "三星") {
                    num7++
                }
            }
            var chartDom = document.getElementById('data1');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: bandarr1,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        barWidth: '60%',
                        data: quantityarr1,
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(150, 100, 180, 0.2)'
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
            //图表2
            var chartDom2 = document.getElementById('data2');
            var myChart2 = echarts.init(chartDom2);
            var option2;

            option2 = {
                title: {
                    text: '商品种类占比',
                    // subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                textStyle:{
                    fontSize:"10px"
                },
                series: [
                    {
                        name: '该类型占比',
                        type: 'pie',
                        radius: [20, 140],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 5
                        },
                            data: [
                                { value: num1, name: '苹果' },
                                { value: num2, name: '三星' },
                                { value: num3, name: 'Oppo' },
                                { value: num4, name: 'Vivo' },
                                { value: num5, name: '华为' },
                                { value: num6, name: '小米' },
                                { value: num7, name: '魅族' },
                            ],

                    }
                ]
            };

            option2 && myChart2.setOption(option2);

            //图标3
            var chartDom1 = document.getElementById('data3');
            var myChart1 = echarts.init(chartDom1);
            var option1;

            option1 = {
                color:['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                title: {
                    text: '入库商品数量'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['入库数量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: bandarr1
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '入库数量',
                        type: 'line',
                        stack: '总量',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(128, 255, 165)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(1, 191, 236)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: quantityarr1}

                ]
            };

            option1 && myChart1.setOption(option1);

        }).catch(err => {
            console.error(err);
        });


    }
    render() {
        return (
            <div className={styles.mains}>
                <p><EyeOutlined />管理首页</p>
                <div>
                    <div id="data1" className={styles.data1}></div>
                    <div id="data2" className={styles.data2}></div>
                </div>
                <div id="data3" className={styles.data3}></div>
            </div>
        )
    }
}
